<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
	class="no-js">
<head th:include="index::setTitle('控制台')"></head>
<body>
   <div>
     <button type="button" class="btn btn-outline-primary" id="addSpider">新增爬虫</button>
     <button type="button" class="btn btn-outline-secondary back">需要帮助</button>
   </div>
   <div align="center">
		<table class="table table-dark">
			<thead>
				<tr>
					<th scope="col">ID</th>
					<th scope="col">直播间</th>
					<th scope="col">主播</th>
					<th scope="col">URL</th>
					<th scope="col">所属平台</th>
					<th scope="col">操作</th>
				</tr>
			</thead>
			<tbody id="listContext">
			</tbody>
		</table>
    </div>
    
    <!-- spider信息 Modal -->
	<div class="modal fade bd-example-modal-lg" id="spiderInfoModal" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true" >
	  <div class="modal-dialog" role="document" style="min-width:70%">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title"></h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body" id="spiderInfoModalBody">
		    <form id="spiderForm">
		      <input type="hidden" name="id" class="id"/>
			  <div class="form-group row">
			    <label for="inputPassword" class="col-sm-2 col-form-label">直播间名称</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control name" name="name" placeholder="直播间名称">
			    </div>
			  </div>
			  <div class="form-group row">
			    <label for="inputPassword" class="col-sm-2 col-form-label">主播名称</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control author" name="author" placeholder="主播名称">
			    </div>
			  </div>
			  <div class="form-group row">
			    <label for="inputPassword" class="col-sm-2 col-form-label">URL</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control url" name="url" placeholder="URL">
			    </div>
			  </div>
			  <div class="form-group row">
			    <label for="inputPassword" class="col-sm-2 col-form-label">平台性质</label>
			    <div class="col-sm-10">
			     <select multiple class="form-control spiderPlatform" name="spiderPlatform">
			      <option value="斗鱼">斗鱼</option>
			      <option value="虎牙">虎牙</option>
			      <option value="战旗">战旗</option>
			      <option value="乐视（章鱼）">乐视（章鱼）</option>
			      <option value="PP（龙珠）">PP（龙珠）</option>
			      <option value="爱奇艺">爱奇艺</option>
			      <option value="人人">人人</option>
			    </select>
			    </div>
			  </div>
			  <div class="alert alert-info" role="alert"><strong>URL</strong>和<strong>平台性质</strong>是必填字段， 其他可以不填，我也会在后续帮你爬取出来!</div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-primary saveSpider">保存</button>
	        <button type="button" class="btn btn-secondary close" data-dismiss="modal">取消</button>
	      </div>
	    </div>
	  </div>
	</div>
    
	<div th:include="index::#footer"></div>
	<script th:src="@{/js/manger.js}"></script>
    <script type="text/x-handlebars-template" id="spiderListHandlebars">
         {{#each this}}
 		     <tr>
				<th scope="row" class="id">{{id}}</th>
				<td>{{name}}</td>
				<td>{{author}}</td>
				<td>{{url}}</td>
				<td>{{spiderPlatform}}</td>
				<td>
  				 <button type="button" class="btn btn-outline-primary spin" value="{{isSpin}}">爬取</button>
				 <button type="button" class="btn btn-outline-info edit">修改</button>
				 <button type="button" class="btn btn-outline-success result">查看结果</button>
				 <button type="button" class="btn btn-outline-danger del">删除</button>
				 <button type="button" class="btn btn-outline-warning view" id="{{url}}">进入直播间</button>	
    			</td>
			</tr>
		 {{/each}}
    </script>
</body>
</html>